<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>TD3</title>
        <link href="style.css" type="text/css"  rel='stylesheet'/>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script type="text/javascript" src="monExample.js"></script>
        <script type="text/javascript" src="function.js"></script>
        <style type="text/css">

* {
	margin: 0;
	padding: 0;
}

img {border: none;}

a {outline: none;}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	background: url(images/post-BG.png) repeat;
	text-align: center;
	color: #fff;
}

h1 {
	margin: 30px 0 0 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}

h3 {
	margin: 10px 0 10px 0;
	text-shadow: #d6d6d6 0px 1px 2px;
	color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

#box {
	text-align: left;
	width: 700px;
	margin: 30px auto 0 auto;
	background: #000;
	overflow: hidden;
	border: 10px solid #000;
	-webkit-box-shadow: #131313 0px 2px 10px;
	-moz-box-shadow: #131313 0px 3px 10px;
	box-shadow: #131313 0px 3px 10px;	
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
}

ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 700px;
	height: 438px;
	overflow: hidden;	
}

ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	background: #000;
	overflow: auto;
	width: 700px;
}

ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	border: 1px solid #979797;
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	float: right;
	margin: 10px 0px 0px 10px;
	opacity: 0.75;
}

ul#thumb a:hover {
	opacity: 1;
} 

ul#slider li {	
	width: 700px;
	height: 438px;
	position: absolute;
	}
	
ul#slider li p {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: inherit;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	width: 100%;
}

ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
	0% {
		left:-700px;
		
	}
	
	100% { 
		left:0px;
	}
}


ul#slider li:target {
	-webkit-animation-name: moveTarget; 
	-webkit-animation-duration: .5s; 
	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
	z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
	0% {
		left:0px;
		
	}
	50% {
		left:700px;
		
	}
	100% { 
		left:-700px;
		z-index: 5;
	}
}

ul#slider li:not(:target) {
	-webkit-animation-name: moveIt; 
  	-webkit-animation-duration: 1.5s; 
  	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
}

</style>
        <style type="text/css">
            #container { position: relative; }
            #imageView { border: 1px solid #000; }
            #imageTemp { position: absolute; top: 1px; left: 1px; }
        </style>
        <script type="text/javascript" src="jscolor.js"></script>
    </head>
    <body>
        <header id="header" class="modalbox">
            <h1>Micro-Blogging</h1>
            <h3>Exemple d'utilisation de WebServices RESTful</h3>
        </header>

        <article id="content">
            <section id="list-article"></section>
        </article>

        <div id="update-article" class="modalbox">
            <h3>Modification d'un Article</h3>
            <form method="post" id="formupdate-article"  onsubmit="return false;">
                <input type="hidden" id="id" name="id" />
                <p>
                    <label for="titre">Titre</label>
                    <input type="text" id="titre" name="titre"/>
                </p>
                <p>
                    <label for="content">Texte</label>
                    <textarea id="content" name="content"></textarea>
                </p>

                <p class="alignright">
                    <a href="#" id="update" class="button blue">Sauvegarder les modifications</a>

                    <a href="#" id="reset" class="button gray">Annuler</a>
                </p>
            </form>
            <div class="clearfix"></div>
        </div>

        <section id="write-article" class="modalbox" style="size: auto">
            <h3>Ecrire un Article</h3>
            <form method="post" id="form-article" enctype="multipart/form-data" onsubmit="return false;">
                <section>
                    <fieldset id="form-text">
                        <label for="titre">Titre</label>
                        <input type="text" id="new-titre" name="titre"/>
                    </fieldset>

                    <fieldset>
                        <label for="content">Texte</label>
                        <textarea id="new-content" name="content"></textarea>
                    </fieldset>

                    <div id="dropbox">
                        <span id="droplabel">Drop file here...</span>
                    </div>

                    <fieldset id="list-image">
                        <!--<img id="preview" src="" alt="[ preview will display here ]" width="100%" height="100%"/>-->
                        <!-- <input id="image" accept="image/*" type="file" name="image" multiple onchange="filesProcess(this.files)"/> -->
                    </fieldset>
                </section>
                <!-- canvas html5 -->
                <section id="canvas-paint">
                    <p><label>Drawing tool: <select id="dtool">
                                <option value="rect">Rectangle</option>
                                <option value="pencil">Pencil</option>
                                <option value="line">Line</option>
                                <option value="circle">Cercle</option>
                            </select></label>
                    </p>

                    <p>Click and Move the mouse over the rectangle below.</p>
                    <div id="container">
                        <canvas id="imageView" width="400" height="300" style="background-color:white;">
                            <p>Unfortunately, your browser is currently unsupported by our web 
                                application.  We are sorry for the inconvenience. Please use one of the 
                                supported browsers listed below, or draw the image you want using an 
                                offline tool.</p>
                            <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                                    href="http://www.mozilla.com">Firefox</a>, <a 
                                    href="http://www.apple.com/safari">Safari</a>, and <a 
                                    href="http://www.konqueror.org">Konqueror</a>.</p>
                        </canvas>
                        
                    </div>
                    Click here: <input id="color" class="color" value="66ff00">
                    <button id="save_canvas" name="save canvas">save canvas</button>
                </section>
                <!-- canvas html5 -->

                <!-- debut code webcam -->
                <div id="webcam-containt">

                    <h2>HTML5 Photo Booth</h2>

                    <video id="live" autoplay></video>
                    <canvas id="snapshot" style="display:none"></canvas>

                    <p><a href="#" id="snap">Take a picture!</a></p>
                    <div id="filmroll"></div>
                </div>
                <!-- fin code webcam  -->
                <table>
                    <tr>
                        <td>
                            <p class="alignright">
                                <a href="#" id="show-paint" class="button blue">Paint</a>
                            </p>
                        </td>
                        <td>
                            <p class="alignright">
                                <a href="#" id="show-webcam" class="button blue">Webcam</a>
                            </p>
                        </td>
                        <td>
                            <p class="alignright">
                                <a href="#" id="write" class="button blue">Publier</a>
                            </p>
                        </td>
                    </tr>
                </table>
            </form>

            <div class="clearfix"></div>
        </section>
        
        <div id="box">

<ul id="slider">
</ul>

<ul id="thumb">
</ul>

</div>

        <footer>
                
        </footer>
</body>
</html>
